<!doctype html>
<html lang="zh">

<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- vue引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- axios 网络通信 ajax -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>

    <div class="mx-auto" style="width: 1000px;" id="app">
        <div>
            <el-input placeholder="请输入内容" v-model='input'
                style="width: 600px; margin: 20px auto 20px; padding-left: 310px;">
            </el-input>
            <el-button type="success" @click="find">搜索</el-button>
        </div>
        <div class="mx-auto"
            style="background-color: white; text-align: center; width: 1000px;height: 200px;margin-bottom: 100px;">
            <h1>如果你有相关简历，可以进行投递</h1>
            <el-upload class="upload-demo" drag action="http://121.5.128.130:8080/api/talent/fileResume/upload "
                multiple style="margin: top 20px;" :on-success="abc">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        </div>
        <div class="form-group">
            <label>姓名</label>
            <input type="text" class="form-control" v-model="form1.name">
        </div>
        <div class="form-group">
            <label>年龄</label>
            <input type="text" class="form-control" v-model="form1.age">
        </div>
        <div class="form-group">
            <label> 性别</label>
            <input type="text" class="form-control" v-model="form1.sex">
        </div>
        <div class="form-group">
            <label>电话</label>
            <input type="text" class="form-control" v-model="form1.tel">
        </div>
        <div class="form-group">
            <label>邮箱</label>
            <input type="email" class="form-control" v-model="form1.email">
        </div>
        <div class="form-group">
            <label>qq</label>
            <input type="text" class="form-control" v-model="form1.qq_number">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">期望薪资</label>
            <input type="text" class="form-control" v-model="form1.salary">
        </div>
        <div class="form-group">
            <label>毕业院校</label>
            <input type="text" class="form-control" v-model="form1.school">
        </div>
        <div class="form-group">
            <label>相关证书</label>
            <input type="text" class="form-control" v-model="form1.certificate">
        </div>
        <div class="form-group">
            <label>照片</label>
            <el-upload action="http://121.5.128.130:8080/api/talent/file/upload" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handlerSuccess">
                <i class="el-icon-plus"></i>
            </el-upload>
            <img width="100%" :src="dialogImageUrl" alt="">
        </div>
        <div class="form-group">
            <label>工作经历</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                v-model="form1.experience"></textarea>
        </div>
        <button class="btn btn-primary" @click="sub()">提交</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form1: {
                        name: ' ',
                        age: ' ',
                        sex: ' ',
                        tel: ' ',
                        email: ' ',
                        qq_number: ' ',
                        salary: ' ',
                        school: ' ',
                        certificate: ' ',
                        avatar: ' ',
                        experience: ' ',
                        resume: ' ',
                    },
                    dialogImageUrl: ' ',
                    dialogVisible: false,
                    input: '',
                }

            },
            methods: {
                sub() {
                    let url = 'http://121.5.128.130:8080/api/talent/vote';
                    this.form1.age = Number(this.form1.age);
                    this.form1.tel = Number(this.form1.tel);
                    this.form1.qq_number = Number(this.form1.qq_number);
                    this.form1.salary = Number(this.form1.salary);
                    let data = this.form1;
                    console.log(data);
                    axios({
                        method: 'post',
                        url: url,
                        data
                    }).then(res => {
                        console.log(res);
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.form1 = {};
                    }).catch(err => {
                        alert(err.message)
                    })
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePictureCardPreview(file) {

                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                handlerSuccess(res) {
                    console.log(res);
                    this.form1.avatar = res.data;
                },
                abc(res) {
                    this.form1.resume = res.data;
                },
                find() {
                    let info = this.input;
                    let url = `http://121.5.128.130:8080/api/talent/getInfo/${info}`
                    axios.get(url, info).then(res => {
                        console.log(res);
                        this.form1 = res.data.data[0];
                        this.dialogImageUrl = this.form1.avatar;
                        this.dialogVisible = true;
                    })
                }
            },
        })
    </script>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>